const sysInfo = uni.getSystemInfoSync();
export class show_model {
	constructor(option = {}) {
		this.bodyModel = null;
		this.cancelModel = null;
		this.confirmModel = null;
		this.input = option.input || null;
		if (this.input) {
			this.input.id = new Date().getTime();
		}
		let opacity = option.opacity || 0.4;
		let model_tit = option.title || '温馨提示';
		let model_content = option.content || ""
		let weight = option.weight || 'normal';
		let clickEvent = option.IsclickEvent || false;
		let cancelVal = option.cancelVal || '取消';
		let confirmVal = option.confirmVal || '确定';
		let cancelColor = option.cancelColor || '#000000';
		let confirmColor = option.confirmColor || '#ff0000';
		let delCancel = option.delCancel || false;
		let align = option.align || "center";
		let fn = () => {};
		this.$event = option.$event || fn;
		let backOff = option.backOff || false;
		this.boxRect = {
			width: sysInfo.screenWidth * 0.76,
			height: this.input ? uni.upx2px(400) : uni.upx2px(300),
			left: sysInfo.screenWidth * 0.12
		};
		this.boxRect.top = sysInfo.screenHeight / 2 - this.boxRect.height / 2;
		//#ifdef APP-PLUS
		this.creatView({
			height: `${sysInfo.screenHeight}px`,
			top: 0
		}, opacity, clickEvent, {
			tit: model_tit,
			content: model_content,
			weight,
			cancelVal,
			confirmVal,
			confirmColor,
			cancelColor,
			delCancel,
			align
		})
		if (!backOff) {
			this.backbtn();
		}
		//#endif
	}
	backbtn() {
		plus.key.addEventListener('backbutton', e => {
			this.hide();
			return true;
		}, false)
	}
	//生成提示框view
	creatView(style, opa, clickEvent, modelInfo) {
		style = {
			left: '0px',
			width: '100%',
			...style
		}
		let view = new plus.nativeObj.View('showModalView', style);
		view.draw([{
				tag: 'rect',
				id: 'modal',
				color: `rgba(0,0,0,${opa})`,
				position: {
					top: '0px',
					left: '0px',
					width: '100%',
					height: '100%'
				}
			},
			{
				tag: 'rect',
				id: 'content',
				color: `rgb(255,255,255)`,
				rectStyles: {
					borderWidth: '2px',
					radius: '5px'
				},
				position: {
					top: this.boxRect.top + 'px',
					left: this.boxRect.left + 'px',
					width: this.boxRect.width + 'px',
					height: this.boxRect.height + 'px'
				}
			},
			{
				tag: 'font',
				id: 'text',
				text: modelInfo.content,
				textStyles: {
					size: uni.upx2px(34) + 'px',
					whiteSpace: 'normal',
					overflow: 'ellipsis',
					weight: modelInfo.weight,
					align: modelInfo.align
				},
				position: {
					top: this.boxRect.top + 'px',
					left: this.boxRect.left + uni.upx2px(30) + 'px',
					width: this.boxRect.width - uni.upx2px(60) + 'px',
					height: uni.upx2px(200) + 'px'
				}
			},
			{
				tag: 'rect',
				id: 'line',
				color: '#EAEAEC',
				position: {
					top: this.boxRect.top + uni.upx2px(this.input ? 300 : 200) + 'px',
					left: this.boxRect.left + 'px',
					width: this.boxRect.width + 'px',
					height: '1px'
				}
			},
			{
				tag: 'rect',
				id: 'line2',
				color: '#EAEAEC',
				position: {
					top: this.boxRect.top + uni.upx2px(this.input ? 300 : 200) + 'px',
					left: '50%',
					width: modelInfo.delCancel ? '0px' : '1px',
					height: modelInfo.delCancel ? '0px' : uni.upx2px(100) + 'px'
				}
			}
		]);
		if (this.input) {
			view.drawRect({
				color: `#eaeaea`,
				radius: '3px',
				borderWidth: '1px'
			}, {
				top: this.boxRect.top + uni.upx2px(220) + 'px',
				left: this.boxRect.left + uni.upx2px(30) + 'px',
				width: this.boxRect.width - uni.upx2px(60) + 'px',
				height: uni.upx2px(60) + 'px'
			}, 'inputWrapper');
			view.drawInput({
				top: this.boxRect.top + uni.upx2px(220) + 'px',
				left: this.boxRect.left + uni.upx2px(40) + 'px',
				width: this.boxRect.width - uni.upx2px(80) + 'px',
				height: uni.upx2px(60) + 'px'
			}, {
				placeholder: this.input.placeholder,
				borderColor: '#eaeaea',
				fontSize: uni.upx2px(33)
			}, this.input.id);
		}
		if (!modelInfo.delCancel) {
			// 取消	
			let viewCancel = new plus.nativeObj.View('cancel', {
				width: this.boxRect.width / 2 + 'px',
				height: uni.upx2px(100) + 'px',
				top: this.boxRect.top + uni.upx2px(this.input ? 300 : 200) + 'px',
				left: this.boxRect.left + 'px',
				backgroundColor: 'rgba(255,255,255,0)'
			});
			viewCancel.draw([{
				tag: 'font',
				id: 'cancel',
				text: modelInfo.cancelVal,
				textStyles: {
					color: modelInfo.cancelColor,
					size: uni.upx2px(34) + 'px',
					weight: 'bold'
				}
			}, ]);
			viewCancel.addEventListener("click", (e) => {
				this.$event({
					res: false,
					types: 'cancel'
				});
				this.hide();
				if (this.input) {
					uni.hideKeyboard();
				}
			}, false);
			this.cancelModel = viewCancel;
		}
		// 确认
		let viewconfirm = new plus.nativeObj.View('confirm', {
			width: modelInfo.delCancel ? this.boxRect.width + 'px' : this.boxRect.width / 2 + 'px',
			height: uni.upx2px(100) + 'px',
			top: this.boxRect.top + uni.upx2px(this.input ? 300 : 200) + 'px',
			left: modelInfo.delCancel ? this.boxRect.left + 'px' : '50%',
			backgroundColor: 'rgba(255,255,255,0)'
		});
		viewconfirm.draw([{
			tag: 'font',
			id: 'confirm',
			text: modelInfo.confirmVal,
			textStyles: {
				color: modelInfo.confirmColor,
				size: uni.upx2px(34) + 'px',
				weight: 'bold'
			}
		}, ]);
		viewconfirm.addEventListener("click", e => {
			let value = '';
			if (this.input) {
				value = view.getInputValueById(this.input.id);
			}
			this.$event({
				value,
				res: true,
				types: 'confirm'
			});
			this.hide();
			if (this.input) {
				uni.hideKeyboard();
			}
		}, false);
		//点击蒙布
		if (clickEvent) {
			view.addEventListener("click", (e) => {
				this.$event({
					res: false,
					types: 'cover'
				});
				this.hide();
			}, false);
		}
		this.bodyModel = view;
		this.confirmModel = viewconfirm;
	}
	showModalAnimationClose() {
		var options = {
			type: 'pop-out',
			duration: 300
		};
		plus.nativeObj.View.startAnimation(options, {
			view: this.bodyModel
		}, {
			view: this.cancelModel
		}, {
			view: this.viewconfirm
		}, function() {
			console.log('plus.nativeObj.View.startAnimation动画结束');
			// 关闭原生动画
			plus.nativeObj.View.clearAnimation();
		});
	}
	showModalAnimationOpen() {
		var options = {
			type: 'pop-in',
			duration: 1000
		};
		plus.nativeObj.View.startAnimation(options, {
			view: this.bodyModel
		}, {
			view: this.cancelModel
		}, {
			view: this.viewconfirm
		}, function() {
			console.log('plus.nativeObj.View.startAnimation动画结束');
			// 关闭原生动画
			plus.nativeObj.View.clearAnimation();
		});
	}
	show() {
		this.showModalAnimationOpen();
		this.bodyModel.show();
		if (this.cancelModel) {
			this.cancelModel.show();
		}
		this.confirmModel.show();
		if (this.input) {
			this.bodyModel.setInputFocusById(this.input.id, true);
		}
	}
	hide() {
		this.showModalAnimationClose();
		this.bodyModel.hide();
		if (this.cancelModel) {
			this.cancelModel.hide();
		}
		this.confirmModel.hide();
	}
}

export default show_model
